<template>
  <div class="search-result">
    <van-tabs v-model="active" @click="onTabSelect">
      <van-tab v-for="tab in tabs" :key="tab.type" :title="tab.title" />
    </van-tabs>

    <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="swiper-item">
        <keep-alive>
          <search-group v-if="tabs[0].active" :keywords.sync="keywords" @slide-to="onTabSelect"/>
          <div class="loading" v-else></div>
        </keep-alive>
      </swiper-slide>

      <swiper-slide class="swiper-item">
        <keep-alive>
          <search-view v-if="tabs[1].active" type="song" :keywords="keywords" />
          <div class="loading" v-else></div>
        </keep-alive>
      </swiper-slide>

      <swiper-slide class="swiper-item">
        <keep-alive>
          <search-view v-if="tabs[2].active" type="playlist" :keywords="keywords" />
          <div class="loading" v-else></div>
        </keep-alive>
      </swiper-slide>

      <swiper-slide class="swiper-item">
        <keep-alive>
          <search-view v-if="tabs[3].active" type="artist" :keywords="keywords" />
          <div class="loading" v-else></div>
        </keep-alive>
      </swiper-slide>

      <swiper-slide class="swiper-item">
        <keep-alive>
          <search-view v-if="tabs[4].active" type="album" :keywords="keywords" />
          <div class="loading" v-else></div>
        </keep-alive>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import SearchGroup from './components/SearchGroup'
import SearchView from './components/SearchView'

export default {
  name: 'search',
  components: {
    SearchGroup,
    SearchView
  },
  data () {
    return {
      tabs: [
        { title: '综合', name: 'group', active: 1, type: 1018 },
        { title: '单曲', name: 'song', active: 0, type: 1 },
        { title: '歌单', name: 'playlist', active: 0, type: 1000 },
        { title: '歌手', name: 'artist', active: 0, type: 100 },
        { title: '专辑', name: 'album', active: 0, type: 10 }
        /* { title: '歌词', type: 1006 },
        { title: '电台', type: 1009 },
        { title: '用户', type: 1014 } */
      ],
      active: 0,
      loading: true,
      swiperOptions: {
        spaceBetween: 20,
        on: {
          slideChange: _ => {
            this.onSwiperChange(this.swiper.activeIndex)
          }
        }
      }
    }
  },
  computed: {
    keywords: {
      get () {
        return this.$route.params.keywords
      },
      set (keywords) {
        this.$router.replace(`/search/${keywords}`)
      }
    },
    swiper () {
      return this.$refs.mySwiper.swiperInstance
    }
  },
  methods: {
    onTabSelect (index) {
      this.setActive(index)
      this.swiper.slideTo(index)
    },
    onSwiperChange (index) {
      this.setActive(index)
      this.active = index
    },
    setActive (index) {
      this.tabs[index].active = true
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  &-item {
    box-sizing: border-box;
    padding: 0 .1rem;
    &:nth-child(1) {
      padding: 0 .05rem;
      background-color: #eee;
    }
  }
}
</style>
